<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片:</td><td><img :src="person.imgUrl" width="150"></td>
    </tr>
    <tr>
      <td>姓名:</td><td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td><td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友:</td><td><ul><li v-for="item in person.friends">{{item}}</li></ul></td>
    </tr>
  </table>
  <button @click="loadData">点击加载数据</button>
</template>

<script setup>
import {ref} from "vue";

//1.定义对象,用于数据绑定
const person = ref({
  name:'',age:'',imgUrl:'',friends:[]
});
//2.定义加载数据的方法
const loadData = ()=>{
  person.value = {
    name:'范传奇',age:18,imgUrl:'fcq.jpg',friends:['李四','王五','赵六']
  }
}
</script>

<style scoped>

</style>